<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>jQuery中的事件绑定</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <style type="text/css" media="screen">
      body {
        width: 960px;
        margin: 0 auto;
        font: 18px/1.8em "微软雅黑";
      }

      h1 {
        color: green;
      }

      div {
        height: 300px;
        border: 1px red solid;
        border-radius: 5px;
      }
    </style>
    <script>
      $(function () {
        $("#demo").on("click", function () {
          $(this).css("backgroundColor", randomColor());
        });

        function randomColor() {
          return "#" + Math.random().toString(16).slice(2, 8);
        }
      });
    </script>
  </head>

  <body>
    <h1>jQuery中的事件绑定</h1>
    <p>点击方框区域，随机更换背景颜色</p>
    <div id="demo"></div>
  </body>
</html>
